<template>
	<div style="padding: 20px;">
		<div>
			<el-form inline :model="formData">
				<el-form-item label="项目">
					<el-select v-model="formData.projectId" filterable clearable>
						<el-option v-for="item in AllProject" :value="item.Id" :label="item.ProjectName"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="施工类别">
					<el-select v-model="formData.constructionType" filterable clearable>
						<el-option v-for="item in constructionType" :value="item.Value" :label="item.Description"
							:key="item.Id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="报销类型">
					<el-select v-model="formData.financeReimbursementReimType" filterable clearable>
						<el-option v-for="item in FinanceLoanResList" :key="item.Value" :value="item.Value"
							:label="item.Description"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="年份">
					<el-date-picker type="year" v-model="formData.selectNumber" value-format="yyyy"  filterable clearable></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getTableData()">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div>
			<el-row>
				<el-col :span="24">
					<el-table :data="payrollList" border v-loading="tableLoading">
						<!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
						<el-table-column type="index" label="序号" width="50" align="center"
							:index="indexMethod"></el-table-column>
						<el-table-column label="项目" align="center" prop="ProjectName"></el-table-column>
						<el-table-column label="收方金额(元)" align="center">
							<el-table-column label="防线" prop="one"></el-table-column>
							<el-table-column label="打钢板" prop="two"></el-table-column>
							<el-table-column label="龙骨安装" prop="three"></el-table-column>
							<el-table-column label="钢龙骨制作" prop="four"></el-table-column>
							<el-table-column label="铝龙骨制作" prop="five"></el-table-column>
							<el-table-column label="钢龙骨安装" prop="six"></el-table-column>
							<el-table-column label="铝龙骨安装" prop="seven"></el-table-column>
							<el-table-column label="窗框安装" prop="eight"></el-table-column>
							<el-table-column label="窗扇安装" prop="nine"></el-table-column>
							<el-table-column label="铝板安装" prop="ten"></el-table-column>
							<el-table-column label="玻璃安装" prop="eleven"></el-table-column>
							<el-table-column label="结构吊装" prop="twelve"></el-table-column>
							<el-table-column label="加焊" prop="thirteen"></el-table-column>
							<el-table-column label="防腐" prop="fourteen"></el-table-column>
							<el-table-column label="扣盖板" prop="fifteen"></el-table-column>
							<el-table-column label="打胶" prop="sixteen"></el-table-column>
							<el-table-column label="其他" prop="seventeen"></el-table-column>
							<el-table-column label="总计" prop="FormuserMoney"></el-table-column>
						</el-table-column>
						<el-table-column label="报销金额(元)" align="center">
							<el-table-column label="机械费" prop="Machinery"></el-table-column>
							<el-table-column label="零星工具费" prop="Sporadictoolfee"></el-table-column>
							<el-table-column label="房租、水电、物管" prop="Rent"></el-table-column>
							<el-table-column label="零星辅材" prop="Sporadicauxiliary"></el-table-column>
							<el-table-column label="差旅费" prop="Travelexpenses"></el-table-column>
							<el-table-column label="其他" prop="Other"></el-table-column>
							<el-table-column label="总计" prop="ReimRuleReimRuleMoney"></el-table-column>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24" align="right">
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>

		<el-row style="margin-top: 20px;">
			<el-col :span="24" class="collapseClass">
				<el-collapse v-model="activeNames" @change="collapseChangeEvent">
					<el-collapse-item v-for="(item,index) in echartsLis" :title="item.projectName" :name="index">
						<el-row>
							<el-col :span="12">
								<div :id="item.ref" style="height: 300px;"></div>
							</el-col>
							<el-col :span="12">
								<div :id="item.bxref" style="height: 300px;"></div>
							</el-col>
						</el-row>
					</el-collapse-item>
				</el-collapse>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	var option = {
		title: {
			text: '',
			left: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{b} : {c} ({d}%)',
			// formatter:function(data){
			// 	return data.name + " : " + data.value+' '+ data.percent.toFixed(0)+"%";
			// }
		},
		legend: {
			orient: 'horizontal',
			bottom:'left'
		},
		series: [{
			type: 'pie',
			radius: '50%',
			minAngle: 3,
			data: [], //数据填充
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	}
	import dayjs from "dayjs"
	import * as publicjs from "../../../../public/Scriput/Public.js"
	export default {
		data() {
			return {
				payrollList: [],
				formData: {
					projectId: '',
					constructionType: '',
					financeReimbursementReimType: '',
					selectNumber: dayjs(new Date()).format('YYYY'),
				},
				AllProject: [],
				constructionType: [],
				//分页数据绑定
				pagination: {
					currentPage: 1,
					pagesizes: [10, 20, 30, 40, 50],
					pagesize: 10,
					total: 0
				},
				childParameter: {},
				ProjectFinanceShow: false,
				FinanceLoanResList: [],
				tableLoading: false,
				echartsLis: [],
				echartsObjLis:[],
				activeNames:['0']
			}
		},
		computed: {

		},
		created() {
			publicjs.http(this.$http, this.$message)
			this.AllProject = publicjs.GetAllProject(this.$http)
		},
		mounted() {
			this.$nextTick(() => {
				this.GetFinanceLoanResEnumHandle()
				this.getConstructionType()
				this.getTableData()
			})
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			chaEr(row) {
				const {
					ShouldTotalPrice,
					RealTotalPrice
				} = row || 0
				return Number(ShouldTotalPrice) - Number(RealTotalPrice)
			},
			//页面初始数据获取
			getTableData() {
				this.tableLoading = true
				let _this = this
				this.$http.post('FinanceManagement/SelFinanceManagementbyProject', {
					...this.formData,
					pageSize: this.pagination.pagesize,
					pageIndex: this.pagination.currentPage,
				}).then(res => {
					const {
						StatusCode,
						Data,
						TotalCount
					} = res.data || 0
					if (StatusCode == 200) {
						this.payrollList = Data.map(x => {
							return {
								...x,
								chaErMoney: _this.chaEr(x)
							}
						})
					} else {
						this.payrollList = []
						this.$message.warning('获取财务获取工资单失败,请重试!')
					}
					this.pagination.total = TotalCount
					this.tableLoading = false

					this.echartsData()
				})
			},
			//获取数据描述
			getDataMessage(type, name, row) {
				const {
					UserId,
					ProjectId
				} = row || null
				let messaga = ''
				let Obj
				switch (type) {
					case 'project':
						Obj = this.AllProject.find(x => x.Id == ProjectId)
						break;;
					case 'user':
						Obj = this.$store.state.AllUsers.find(x => x.Id == UserId)
						break;
				}
				if (Obj) {
					messaga = Obj[name]
				}
				return messaga
			},
			//获取详情
			GetPayrollInfo(row) {
				this.childParameter = {
					projectId: row.ProjectId,
					userId: row.UserId,
					createTime: this.formData.createTime,
					emdTime: this.formData.emdTime
				}
				this.ProjectFinanceShow = true
			},
			//表格数据合集
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								let sum =  parseFloat(prev)  + parseFloat(curr)
								return sum.toFixed(2);
							} else {
								return prev.toFixed(2);
							}
						}, 0);
						sums[index] += ' 元';
					} else {
						sums[index] = '';
					}
				});
				return sums;
			},
			//获取报销类型
			GetFinanceLoanResEnumHandle() {
				this.$http.post('NewFinanceReimbursementReim/GetFinanceLoanResEnum').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.FinanceLoanResList = Data
					else this.FinanceLoanResList = []
				})
			},
			// 获取施工类别
			getConstructionType() {
				this.$http.post('PayrollForm/GetConstructionType').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.constructionType = Data
					else this.constructionType = []
				})
			},
			//echarts 数据
			echartsData() {
				let _this= this
				this.echartsLis = this.payrollList.map((x,i) => {					
					let newoption = {
						projectName: x.ProjectName,
						ref:'shoufang-' + i, 
						bxref:'baoxiao-' + i, 
						option: JSON.parse(JSON.stringify(option)),
						bxoption: JSON.parse(JSON.stringify(option)),
					}
					newoption.option.series[0].data = [{
							value: x.one,
							name: '防线'
						},
						{
							value: x.two,
							name: '打钢板'
						},
						{
							value: x.three,
							name: '龙骨安装'
						},
						{
							value: x.four,
							name: '钢龙骨制作'
						},
						{
							value: x.five,
							name: '铝龙骨制作'
						},
						{
							value: x.six,
							name: '钢龙骨安装'
						},
						{
							value: x.seven,
							name: '铝龙骨安装'
						},
						{
							value: x.eight,
							name: '窗框安装'
						},
						{
							value: x.nine,
							name: '窗扇安装'
						},
						{
							value: x.ten,
							name: '铝板安装'
						},
						{
							value: x.eleven,
							name: '玻璃安装'
						},
						{
							value: x.twelve,
							name: '结构吊装'
						},
						{
							value: x.thirteen,
							name: '加焊'
						},
						{
							value: x.fourteen,
							name: '防腐'
						},
						{
							value: x.fifteen,
							name: '扣盖板'
						},
						{
							value: x.sixteen,
							name: '打胶'
						},
						{
							value: x.seventeen,
							name: '其他'
						},
						{
							value: x.Cardinalnumber - x.FormuserMoney,
							name: '合同剩余'
						},
					]
					newoption.option.title.text="收放金额"
					newoption.bxoption.series[0].data = [{
							value: x.Machinery,
							name: '机械费'
						},
						{
							value: x.Sporadictoolfee,
							name: '零星工具费'
						},
						{
							value: x.Rent,
							name: '房租、水电、物管'
						},
						{
							value: x.Sporadicauxiliary,
							name: '零星辅材'
						},
						{
							value: x.Travelexpenses,
							name: '差旅费'
						},
						{
							value: x.Other,
							name: '其他'
						},
						{
							value: x.Cardinalnumber - x.ReimRuleReimRuleMoney,
							name: '合同剩余'
						},
					]
					newoption.bxoption.title.text="报销金额"
					return newoption
				})
				this.echartsObjLis = []
				this.$nextTick(()=>{
					this.echartsLis.forEach(x=>{
						let echartobj = _this.$echarts.init(document.getElementById(x.ref))
						let bxechartobj = _this.$echarts.init(document.getElementById(x.bxref))
						echartobj.setOption(x.option)
						bxechartobj.setOption(x.bxoption)
						this.echartsObjLis.push(echartobj)
						this.echartsObjLis.push(bxechartobj)
					})
				})
			},
			collapseChangeEvent(){
				this.$nextTick(()=>{
					this.echartsObjLis.forEach(x=> x.resize())
				})
			},
		}
	}
</script>

<style scoped>
	/deep/ .collapseClass .el-collapse-item__header{
		font-weight: bold !important;
		font-size: 18px !important;
	}
</style>